@import "variables";
@import "mixins";

.btn,
button,
input[type=button],
input[type=reset],
input[type=submit] {
  display: inline-block;
  padding: 0 0.5em;
  line-height: 1.57143;
  font-size: fontSize(m);
  color: color(default);
  border: 1px solid;
  border-radius: 7px;
  vertical-align: top;
  @include transition(all linear 0.2s);

  &.wf {
    min-width: 0 !important;
    width: 100% !important;
  }
}

.btn-outlined {
  background-color: transparent !important;
}
.btn-xs {
  font-size: fontSize(xs);
  border-radius: 3px;
}
.btn-small,.btn-s {
  font-size: fontSize(s);
  border-radius: 5px;
}
.btn-large,.btn-l {
  font-size: fontSize(l);
  border-radius: 9px;
}

/*  diff button colors */
@mixin setBtnColor($colorName) {
  .btn-#{$colorName} {
    color: color(white);
    border-color: color($colorName);
    background-color: color($colorName);
    &:hover, &:active {
      background-color: darken(color($colorName), 5%);
    }
    &.btn-outlined {
      color: color($colorName);
    }
  }
}

@each $colorName in (primary blue green red white gray) {
  @include setBtnColor($colorName);
}

.btn-white {
  //color: color(default);
  //border-color: color(default);
  //&.btn-outlined {
  //  color: color(default);
  //}
}

.btn-primary {
  background-image: -moz-linear-gradient( 96deg, rgb(84,62,155) 0%, rgb(149,82,189) 100%);
  background-image: -webkit-linear-gradient( 96deg, rgb(84,62,155) 0%, rgb(149,82,189) 100%);
  background-image: -ms-linear-gradient( 96deg, rgb(84,62,155) 0%, rgb(149,82,189) 100%);
}


.btn-block {
  display: block;
  width: 100%;
  height: 44px;
  border-radius: 6px;
  background-image: -moz-linear-gradient( 96deg, rgb(84,62,155) 0%, rgb(149,82,189) 100%);
  background-image: -webkit-linear-gradient( 96deg, rgb(84,62,155) 0%, rgb(149,82,189) 100%);
  background-image: -ms-linear-gradient( 96deg, rgb(84,62,155) 0%, rgb(149,82,189) 100%);

  font-size: 16px;
  font-family: "Microsoft YaHei";
  color: color(white);
  line-height: 42px;
}